<template>
  <div class="table-page-search-wrapper">
    <el-form :inline="true" :form="form" label-width="70px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="部门" style="height: 36px">
            <dept-select
              ref="deptSelect"
              :selectValue="form.useDeptId"
              @select="value => handleTreeSelect('useDeptId', value)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区域" style="height: 36px">
            <area-select ref="areaSelect" @select="value => handleTreeSelect('areaId',value)" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资产类别" style="height: 36px">
            <type-select
              :selectValue="form.categoryId"
              ref="typeSelect"
              @select="value => handleTreeSelect('categoryId', value)"
              v-model="form.categoryId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-tooltip class="item" content="查询" effect="dark" placement="top">
              <el-button type="primary" @click.stop="handleSearch" icon="el-icon-search" />
            </el-tooltip>
            <el-tooltip class="item" content="重置" effect="dark" placement="top">
              <el-button @click="handleReset" icon="el-icon-refresh-right" />
            </el-tooltip>
            <a @click="toggleAdvanced" style="margin-left: 8px">
              {{ advanced ? '收起' : '展开' }}
              <el-icon :type="advanced ? 'up' : 'down'" />
            </a>
          </el-form-item>
        </el-col>
        <template v-if="advanced">
          <el-col :span="6">
            <el-form-item label="是否打印" :class="[ advanced ? 'mt20' : '' ]">
              <el-select clearable v-model="form.isPrint" placeholder="请选择">
                <el-option :value="2" label="全部" />
                <el-option :value="0" label="已打印" />
                <el-option :value="1" label="未打印" />
              </el-select>
              <!-- <el-autocomplete
                :style="fixWidth"
                v-model="form.supplier"
                :fetch-suggestions="(queryString, cb) => supplierQueryAsync(queryString, cb, true, 'supplier')"
                placeholder="请输入供应商名称"
                @select="value => supplierSelect(value, 'supplier', 'supplierCode')"
              />-->
            </el-form-item>
          </el-col>
          <el-col :span="6" :class="[ advanced ? 'mt20' : '' ]">
            <el-form-item label="标签材质">
              <el-select clearable v-model="form.lableType">
                <el-option :value="0" label="无标签" />
                <el-option :value="1" label="普通RFID" />
                <el-option :value="2" label="RFID抗金属" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :class="[ advanced ? 'mt20' : '' ]">
            <el-form-item label="资产状态">
              <el-select clearable v-model="form.assetsState">
                <el-option :value="0" label="正常" />
                <el-option :value="1" label="遗失" />
                <el-option :value="2" label="标签破损" />
                <el-option :value="3" label="维修" />
                <el-option :value="4" label="报废" />
                <el-option :value="5" label="违规异动" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :class="[ advanced ? 'mt20' : '' ]">
            <el-form-item label="资产名称">
              <el-input placeholder="请输入资产名称" v-model="form.assetsName" />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import DeptSelect from '../components/DeptSelect'
import AreaSelect from '../components/AreaSelect'
import TypeSelect from '../components/TypeSelect'
import { supplierFuzzyQuery } from '@/api/assetsNew'

export default {
  components: {
    DeptSelect,
    AreaSelect,
    TypeSelect
  },
  data() {
    return {
      advanced: false,
      fixWidth: {
        width: '100%'
      },
      form: {
        assetsName: null,
        categoryId: null,
        useDeptId: null,
        isPrint: 2,
        pageNo: 1,
        areaId: null,
        supplierCode: null,
        lableType: null,
        assetsState: null
      },
      mdl: {},
      row: JSON.stringify(this.$route.query) !== '{}' && JSON.parse(this.$route.query.row)
    }
  },
  methods: {
    async supplierSelect(value, key, code) {
      console.log('supplierSelect', value, key)
      this.$set(this.form, code, value.supplierId)
      this.$set(this.form, key, value.supplier)
      console.log('form', this.form)
    },
    supplierFilter(queryString) {
      return state => {
        // console.log('state', state)
        return state.supplier.indexOf(queryString) >= 0
      }
    },
    async supplierQueryAsync(queryString, cb, bool, mode) {
      console.log('bool', bool)
      if (mode === 'supplier') {
        this.$set(this.form, 'supplierCode', null)
      } else {
        this.$set(this.form, 'factoryCode', null)
      }
      queryString = queryString === undefined ? null : queryString
      let results = []
      if (queryString) {
        console.log('queryString', queryString)
        let res = ''
        if (bool) {
          res = await supplierFuzzyQuery({ supplierName: queryString })
        } else {
          res = await fuzzyQuery({ assetsName: queryString })
        }
        var supplier = res.data
        if (queryString) {
          if (bool) {
            // 过滤供应商
            results = supplier.filter(this.supplierFilter(queryString))
          } else {
            results = supplier.filter(this.nameFilter(queryString))
          }
        } else {
          results = supplier
        }
        if (bool) {
          results.map(v => {
            v.value = v.supplier
          })
        } else {
          results.map(v => {
            v.value = v.assetsName
          })
        }
        // console.log('results', results)
        // if (results.length === 0) {
        //   if (bool) {
        //     // 供应商
        //     results.push({
        //       value: `新增[${queryString}]`,
        //       supplier: queryString,
        //       supplierId: '-1'
        //     })
        //   }
        // }

        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          cb(results)
        }, 1000 * Math.random())
      } else {
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          cb(results)
        }, 300 * Math.random())
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleSearch() {
      // console.log('form', this.form)
      this.$emit('search', this.form)
    },
    handleReset() {
      this.$refs.typeSelect.reset()
      this.$refs.areaSelect.reset()
      this.$refs.deptSelect.reset()
      for (const key in this.form) {
        this.$set(this.form, key, null)
      }
      this.$emit('search', this.form)
    },
    handleTreeSelect(key, value) {
      this.$set(this.form, key, value.id)
    }
  },
  created() {
    // console.log('row', this.$route.query, this.row)

    if (this.row) {
      this.$set(this.form, 'useDeptId', this.row.key)
      this.handleSearch()
    }
  }
}
</script>